<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="header"></div>
    这是首页
    <div class="footer"></div>
</body>
<script src="../jquery.js"></script>
<script>
    $(".header").load("./public/header.html .headerBox", function(res, state, xhr){
        // console.log(res, state, xhr)
        // 获取数据中的元素只能在请求成功后，才能获取到
        // console.log($(".header").find("li"))
        // $(".header").find("li").click(function(){
        //     console.log(this)
        // })
    });

    $(".footer").load("./public/header.html .footerBox");

    // 只是给数据中的元素绑定事件的话，也可以使用事件委托
    // 事件委托优势：可以给页面上暂时不存在的元素绑定事件
    $(".header").on("click", "li", function(){
        console.log(this)
    })

    // 异步

</script>
</html>